<style lang="less">
  @import '../styles/common.less';
  @import '../tables/components/table.less';
</style>
<style>
  .dashboard_import .menu-div-btn {
    text-align: right;
  }
</style>
<template>
  <div class="dashboard_import">
    <Card>
      <p slot="title">
        <Icon type="person"></Icon>
        数据导入
      </p>
      <div style="min-height: 100px;">
        <div class="menu-div">
          <Form label-position="top">
            <FormItem label="数据类型">
              <Select v-model="dataType" :transfer="true" style="width:100%;">
                <Option v-for="item in dataTypeArr" :value="item.id" :key="item.id">{{ item.name }}</Option>
              </Select>
            </FormItem>
            <FormItem label="上传附件">
              <div class="dataDetail-div chooseUser accessory">
                <div class="users" v-for="el in importDataArr">
                  <span class="span-name" v-text="el.name"></span>
                  <span class="span-icon" @click="delimportData(el)">
                  <Icon type="md-close"/>
                </span>
                </div>
                <Upload v-if="importDataArr.length == 0"
                        :before-upload="handleUpload" action="">
                  <Button icon="ios-cloud-upload-outline">选择文件</Button>
                </Upload>
              </div>
            </FormItem>
          </Form>
        </div>
        <div class="menu-div menu-div-btn">
          <a href="/vendors/Excel/jichuzhishi.xlsx" download="基础知识.xlsx" style="margin-right: 10px;">
            <Button type="primary" class="Button">基础知识模板</Button>
          </a>
          <a href="/vendors/Excel/zonghejineng.xlsx" download="综合技能.xlsx" style="margin-right: 10px;">
            <Button type="primary" class="Button">综合技能模板</Button>
          </a>
          <a href="/vendors/Excel/ruanshili.xlsx" download="软实力.xlsx" style="margin-right: 10px;">
            <Button type="primary" class="Button">软实力模板</Button>
          </a>
          <Button type="primary" style="width: 100px;margin-right: 10px;" :loading="save_loading" @click="saveInfoAjax">
            导入
          </Button>
          <Button type="primary" style="width: 100px;margin-right: 10px;" :loading="download_loading"
                  @click="downloadFun()">
            导出
          </Button>
          <Button type="primary" style="width: 100px;" @click="deleteFun">取消</Button>
        </div>
      </div>
    </Card>
  </div>
</template>
<script>
  import Cookies from 'js-cookie'
  import Util from '../../libs/util'
  import Utils from '../../libs/mod.utils'
  import String from '../../libs/mod.string'
  import Modal from '../../libs/mod.Modal'
  export default {
    components: {},
    data () {
      return {
        save_loading: false,
        download_loading: false,
        importDataArr: [],
        dataTypeArr: [
          {
            id: 'jichuzhishi',
            name: '基础知识'
          },
          {
            id: 'zonghejineng',
            name: '综合技能'
          },
          {
            id: 'ruanshili',
            name: '软实力'
          }
        ],
        dataType: 'jichuzhishi'
      }
    },
    created: function () {
      var _this = this
    },
    mounted () {
      var _this = this
    },
    methods: {
      // 选中文件
      handleUpload: function (file) {
        var _this = this
        _this.UploadFile(file)
        return false
      },
      // 上传文件
      UploadFile: function (file) {
        var _this = this
        var name = file.name
        var arr = name.split('.')
        var type = arr[1]
        if (type != 'xlsx') {
          _this.$Message.destroy();_this.$Message.error('请上传xlsx文件!')
          return false
        }
        var formData = new FormData()
        formData.append('file', file)
        formData.append('action', 'UploadVMKImagePath')
        var params = {
          url: '/attach/addFile',
          type: Util.method.post,
          data: formData,
          success: _successFun
        }
        Util.ajax(_this, params)
        function _successFun(res) {
          if (res.result == 0) {
            var data = res.data
            var id = data.id
            var name = data.name
            var url = data.url
            var obj = {
              id: id,
              name: name,
              url: url
            }
            _this.importDataArr.push(obj)
          } else {
            _this.$Message.destroy();_this.$Message.error('上传失败!')
          }
        }
      },
      // 删除附件
      delimportData: function (el) {
        var _this = this
        var id = el.id
        var importDataArr = _this.importDataArr
        for (var k in importDataArr) {
          if (!importDataArr[k]) {
            continue
          }
          if (id == importDataArr[k].id) {
            var del = importDataArr.splice(k, 1)
            break
          }
        }
        _this.importDataArr = importDataArr
      },
      // 取消
      deleteFun: function () {
        var _this = this
        _this.importDataArr = []
      },
      // 保存
      saveInfoAjax () {
        var _this = this
        if (_this.importDataArr.length == 0) {
          _this.$Message.destroy();_this.$Message.error('请上传附件!')
          return false
        }
        var fileId = _this.importDataArr[0].id
        var dataType = _this.dataType
        var url = '/dashboard/importBasic'
        switch (dataType) {
          case 'jichuzhishi' :
            url = '/dashboard/importBasic'
            break
          case 'zonghejineng' :
            url = '/dashboard/importComposite'
            break
          case 'ruanshili' :
            url = '/dashboard/importSoft'
            break
        }
        var data = {
          uid: Util.toJson(localStorage.getItem('userInfo')).id,
          fid: fileId
        }
        var params = {
          url: url,
          type: Util.method.post,
          data: data,
          success: _successFun
        }
        Util.ajax(_this, params)
        _this.save_loading = true
        function _successFun(res) {
          _this.save_loading = false
          if (res.result == 0) {
            _this.importDataArr = []
            _this.$Message.destroy();_this.$Message.success('导入成功!')
          } else {
            _this.$Message.destroy();_this.$Message.error('导入失败!错误码：' + res.result)
          }
        }
      },
      // 下载
      downloadFun: function () {
        var _this = this;
        _this.$Message.destroy();_this.$Message.success('功能开发中!')
        var data = {
          uid: Util.toJson(localStorage.getItem('userInfo')).id,
        };
        var params = {
          url: '/attach/db2excle',
          type: Util.method.post,
          data: data,
          success: _successFun
        };
        //Util.ajax(_this, params);
        //_this.download_loading = true;
        function _successFun(res) {
          _this.download_loading = false;
          if (res.result == 0) {
            var url = res.data;
            var date = Utils.dateToDateString(new Date());
            Utils.DownloadFile(url, '导出能力雷达_' + date + '.xlsx');
          } else {
            _this.$Message.destroy();_this.$Message.error('导出信息失败!');
          }
        }
      },

    }
  }
</script>
